<template>
  <div>
    <template v-if="listType == 1">
      <div @click="clickGoLiveDetail(item.id,item.mdType)" class="c-pv24 c-flex-row c-bd-b1" :class="item.status==4 ? 'status-expire':''" :key="index" v-for="(item,index) in liveList">
        <div class="c-ww180 c-hh120 c-text-hidden c-p c-br16">
          <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.liveCover, require('../../assets/defult270.png'))" />
          <vip-status :item="item"></vip-status>
        </div>
        <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb">
          <div class="c-fs24 c-lh34 c-text-ellipsis1 c-fc-xblack">
            <span v-if="item.isSaleOut == 0" class="c-mr6 c-fs20 c-fc-white c-ph4 c-br-tr10 c-br-bl10 c-bg-ccc">已停售</span>{{item.name}}
          </div>
          <div>
            <div v-if="isMy" class="c-flex-row c-aligni-center">
              <!-- <div class="c-fs20 c-pv10 c-fc-gray" v-if="item.mdType==1">{{item.earliestExpireTime?'有效期至&ensp;'+item.earliestExpireTime:(item.hasPermission?'长期有效':'')}}</div> -->
              <div class="c-fs20 c-pv10 c-fc-gray" v-if="item.role<2">{{item.expireAt?'直播有效期&ensp;'+item.expireAt:(item.hasPermission?'长期有效':'')}}</div>
            </div>
            <div v-else class="c-flex-row c-aligni-center">
              <div class="c-fs20 c-pv10  c-fc-gray c-mr6" v-if="item.isWatchTime==1">支持试看 |</div>
              <div class="c-fs20 c-pv10 c-fc-gray" v-if="item.mdType==2">{{item.createdAt}}</div>
              <!-- <div class="c-fs20 c-pv10 c-fc-gray" v-else-if="[2, 3, 4].includes(item.status) && item.playBackEndAt">有效期至&ensp;{{item.playBackEndAt}}</div> -->
              <div class="c-fs20 c-pv10 c-fc-gray" v-else>{{item.startAt}}</div>
            </div>
            <div class="c-flex-row c-justify-sb c-aligni-center">
              <template v-if="isMy">
                <div class="c-fs20 c-fc-gray" v-if="item.mdType==1||(item.mdType==2&&item.status==1)">{{item.number}}人{{item.status == 1 ? '正在学习' : item.status == 0 ? '待学习':'已学习'}}</div>
                <div class="c-fs18 c-pl10 c-pr10 c-fc-white status-btn c-flex-row c-aligni-center c-justify-center" :class="item.mdType==2&&item.status==0?'':statusClassName[item.status]">
                  <div class="c-flex-row c-aligni-end c-mr6" v-if="item.status==1">
                    <span class="pillar"></span>
                    <span class="pillar"></span>
                    <span class="pillar"></span>
                  </div>
                  {{item.mdType==2&&item.status==0?'':statusMap[item.status]}}</div>
              </template>
              <template v-else>
                <span class="c-fc-xmlred c-fs0 c-fw600">
                  <span v-if="item.payType == 2" class="c-fs20">{{'￥' | iosPriceFilter(item.optimal)}}</span>
                  <span :class="checkCnPrice(item.payType, item.price, 51) ? 'c-fs22' : 'c-fs26'">{{item.payType | priceValueFilter(item.price, 51, item.optimal)}}</span>
                </span>
                <div class="c-fs18 c-pl10 c-pr10 c-fc-white status-btn c-flex-row c-aligni-center c-justify-center" :class="statusClassName[item.status]">
                  <div class="c-flex-row c-aligni-end c-mr6" v-if="item.status==1">
                    <span class="pillar"></span>
                    <span class="pillar"></span>
                    <span class="pillar"></span>
                  </div>
                  {{statusMap[item.status]}}</div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div @click="clickGoLiveDetail(item.id,item.mdType)" class="c-pv24 c-ph24 c-flex-row c-bg-white c-mb24 c-br16" :class="item.status==4 ? 'status-expire':''" :key="index" v-for="(item,index) in liveList">
        <div class="c-ww180 c-hh120 c-text-hidden c-p c-br16">
          <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :coverUrl="$addXossFilter(item.liveCover, require('../../assets/defult270.png'))" />
          <vip-status :item="item"></vip-status>
        </div>
        <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb">
          <div class="c-fs24 c-lh34 c-text-ellipsis1 c-fc-xblack">
            <span v-if="item.isSaleOut == 0" class="c-mr6 c-fs20 c-fc-white c-ph4 c-br-tr10 c-br-bl10 c-bg-ccc">已停售</span>{{item.name}}
          </div>
          <div>
            <div v-if="isMy" class="c-flex-row c-aligni-center">
              <!-- <div class="c-fs20 c-pv10 c-fc-gray" v-if="item.mdType==1">{{item.earliestExpireTime?'有效期至&ensp;'+item.earliestExpireTime:(item.hasPermission?'长期有效':'')}}</div> -->
              <div class="c-fs20 c-pv10 c-fc-gray" v-if="item.role<2">{{item.expireAt?'直播有效期&ensp;'+item.expireAt:(item.hasPermission?'长期有效':'')}}</div>
            </div>
            <div v-else class="c-flex-row c-aligni-center">
              <div class="c-fs20 c-pv10  c-fc-gray c-mr6" v-if="item.isWatchTime==1">支持试看 | </div>
              <div class="c-fs20 c-pv10 c-fc-gray" v-if="item.mdType==2">{{item.createdAt}}</div>
              <!-- <div class="c-fs20 c-pv10 c-fc-gray" v-else-if="[2, 3, 4].includes(item.status) && (item.expireAt || item.playBackEndAt)">有效期至&ensp;{{item.expireAt || item.playBackEndAt}}</div> -->
              <div class="c-fs20 c-pv10 c-fc-gray" v-else>{{item.startAt}}</div>
            </div>
            <div class="c-flex-row c-justify-sb c-aligni-center">
              <template v-if="isMy">
                <div class="c-fs20 c-fc-gray" v-if="item.mdType==1||(item.mdType==2&&item.status==1)">{{item.number}}人{{item.status == 1 ? '正在学习' : item.status == 0 ? '待学习':'已学习'}}</div>
                <div class="c-fs18 c-pl10 c-pr10 c-fc-white status-btn c-flex-row c-aligni-center c-justify-center" :class="item.mdType==2&&item.status==0?'':statusClassName[item.status]">
                  <div class="c-flex-row c-aligni-end c-mr6" v-if="item.status==1">
                    <span class="pillar"></span>
                    <span class="pillar"></span>
                    <span class="pillar"></span>
                  </div>
                  {{item.mdType==2&&item.status==0?'':statusMap[item.status]}}</div>
              </template>
              <template v-else>
                <span class="c-fc-xmlred c-fs0 c-fw600">
                  <span v-if="item.payType == 2" class="c-fs20">{{'￥' | iosPriceFilter(item.optimal)}}</span>
                  <span :class="checkCnPrice(item.payType, item.price, 51) ? 'c-fs22' : 'c-fs26'">{{item.payType | priceValueFilter(item.price, 51, item.optimal)}}</span>
                </span>
                <div class="c-fs18 c-pl10 c-pr10 c-fc-white status-btn c-flex-row c-aligni-center c-justify-center" :class="statusClassName[item.status]">
                  <div class="c-flex-row c-aligni-end c-mr6" v-if="item.status==1">
                    <span class="pillar"></span>
                    <span class="pillar"></span>
                    <span class="pillar"></span>
                  </div>
                  {{statusMap[item.status]}}</div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js"
import vipStatus from '@/components/templates/common/vipStatus.vue'
import CoverImg from '@/components/templates/common/coverImg.vue';
export default {
  name: "LiveItem",
  props: {
    liveList: {
      type: Array,
      default: () => []
    },
    isMy: {
      type: Boolean,
      default: false
    },
    listType: {
      type: Number,
      default: 1
    }
  },
  components: {
    vipStatus,
    CoverImg
  },
  data() {
    return {
      statusMap: {
        0: "预告",
        1: "正在直播",
        2: "回放",
        3: "直播已结束",
        4: "回放已过期"
      },
      statusClassName: {
        0: 'status-0',
        1: 'status-1',
        2: 'status-2',
        3: 'status-3',
        4: 'status-4',
      },
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      themeName: localStorage.getItem("themeName")
        ? localStorage.getItem("themeName")
        : "mb5"
    };
  },
  methods: {
    checkCnPrice(payType, price, prodType) {
      return utilJs.checkCnPrice(payType, price, prodType)
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickGoLiveDetail(liveId, mdType) {
      let toPath = ''
      if (mdType == 2) {
        toPath = `/homePage/live/livePersonalDetail?liveId=${liveId}`;
      } else {
        toPath = `/homePage/live/liveDetail?liveId=${liveId}`;
      }
      this.iosAppRouteChange(toPath);
    }
  }
};
</script>

<style scoped lang="scss">
@function pxToRem($px) {
  //$rpx为需要转换的字号
  @return $px/40 + rem;
}
.status-expire {
  * {
    opacity: 0.75;
  }
}
.vipStatus {
  position: absolute;
  top: 0;
  left: 0;
  /* width: 2.5rem;
  height: 2.5rem; */
  width: 1.75rem;
  height: 1.75rem;
}
.status-btn{
  height: pxToRem(28);
  line-height:pxToRem(28);
  border-radius: pxToRem(15);
}
.pillar{
  width: 1px;
  margin: 0 1px;
  height: pxToRem(4);
  background: #fff;
  border-radius: 5px;
  animation: pillarDance 2s infinite  ease;
}
.pillar:first-child{
  animation-delay:0.5s;
}
.pillar:nth-child(2){
  animation-delay:1s;
}
.pillar:nth-child(3){
  animation-delay:1.5s;
}
.status-0 {
  background: linear-gradient(90deg, #f74163, rgba(247, 65, 99, 0.7));
}
.status-1 {
  background: linear-gradient(90deg, #30b656, rgba(48, 182, 86, 0.7));
}
.status-2 {
  background: linear-gradient(90deg,#ff8920, #ffc26b);
}
.status-3 {
  background: linear-gradient(90deg, #406596, rgba(64, 101, 150, 0.7) 100%);
}
.status-4 {
  background: #cccccc;
}
.free-end-txt{
  background: rgba(255,48,12,0.10);
}
@-webkit-keyframes pillarDance{
    0%{height:pxToRem(4);}
    50%{height:pxToRem(16);}
    100%{height:pxToRem(4);}
}
</style>
